/*** Additional Leaflet Styles ***/

.leaflet-marker-icon {
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
}

.marker-shape {

    /* width: 28px;
    height: 28px; */

    width: inherit;
    height: inherit;

    /* @url https://github.com/masajid390/BeautifyMarker */
    border-top-left-radius: 50%;
    border-top-right-radius: 50% 100%;
    border-bottom-left-radius: 100% 50%;
    border-bottom-right-radius: 0%;
    transform: rotate(45deg);

    border: 2px solid rgb(102, 102, 102);
    box-sizing: border-box;

    background-color: var(--default-marker-background-color);
    color: black;
    opacity: 0.8;
}

.marker-text {
    transform: rotate(-45deg);
    /* margin-top: 0px; */
    /* margin-left: 0px; */

    line-height: 150%;
    font-size: 16px;
    /* font-family: "Hind", sans-serif; */
    font-family: var(--font-family);
    font-weight: bold;
}


.leaflet-marker-icon.highlight {
    --gold-transparent: rgba(255, 215, 0, 0.5);
    box-shadow: 0px 0px 15px 15px var(--gold-transparent);
    background-color: var(--gold-transparent);
    border-radius: 100%;
    opacity: 1 !important;
    z-index: 16384 !important;
}

.leaflet-marker-icon.selected {
    opacity: 1 !important;
}

.leaflet-marker-icon.somethingElseSelected {
    opacity: 0.25 !important;
}

/* 
.leaflet-marker-icon {
    scale:2;
    transform-origin: bottom center;
} */



.POI > .marker-shape .STOP > .marker-shape,
.STREET > .marker-shape {
    border-width: 3px;
}

.STOP > .marker-shape {
    /* border-color:#008754; */
    border-color: var(--STOP-border-color)
}

.STREET > .marker-shape {
    border-color: var(--STREET-border-color)
}

.POI > .marker-shape {
    border-color: var(--POI-border-color)
}

.tour > .marker-shape {
    background-color: var(--tour-background-color);
    color: var(--tour-text-color);
    font-weight: bold;
}